var piMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.productidentification');
var referenceMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.reference');
var orderItemStore;
var orderItemGrid;
var orderItemWindow;

var selectOrderItem = function(piId){
    if (!orderItemWindow) {
        orderItemWindow = new Ext.Window({
            title: message.get('message.combo.pleaseselect'),
            layout: 'fit',
            width: 740,
            height: 430,
            closeAction: 'hide',
            plain: true,
            modal: true,
            items: [{
                id: 'orderItemPanel',
                region: 'center',
                bodyStyle: {
                    background: '#ffffff',
                    padding: '7px'
                },
                html: '<div id="orderItemDiv"></div>'
            }]
        });
    }
    orderItemWindow.show();
    
    if (orderItemGrid) 
        return;
    orderItemStore = new Ext.data.GroupingStore({
        url: '../../servlet/OrderServlet?action=5&id=' + piId,
        
        reader: new Ext.data.XmlReader({
            record: 'item',
            id: 'id',
            totalRecords: 'itemTotal'
        }, ['index', 'id', 'pantoneNumber', 'colorNumber', 'realColor', {
            name: 'amountS',
            type: 'int'
        }, {
            name: 'amountM',
            type: 'int'
        }, {
            name: 'amountL',
            type: 'int'
        }, {
            name: 'amountXl',
            type: 'int'
        }, {
            name: 'amountXxl',
            type: 'int'
        }, {
            name: 'amountXxxl',
            type: 'int'
        }, {
            name: 'total',
            type: 'int'
        }, 'colorA', 'pantoneNumberA', 'realColorA', 'percentageA', 'colorB', 'pantoneNumberB', 'realColorB', 'percentageB', 'colorC', 'pantoneNumberC', 'realColorC', 'percentageC', 'colorD', 'pantoneNumberD', 'realColorD', 'percentageD', 'colorE', 'pantoneNumberE', 'realColorE', 'percentageE', 'colorF', 'pantoneNumberF', 'realColorF', 'percentageF', 'colorG', 'pantoneNumberG', 'realColorG', 'percentageG', 'colorH', 'pantoneNumberH', 'realColorH', 'percentageH']),
        
        groupField: 'index',
        sortInfo: {
            field: 'index',
            direction: "ASC"
        }
    });
    
    orderItemStore.setDefaultSort('id', 'desc');
    
    function renderSelectItem(value, p, record){
        return String.format('<a href="javascript: selectOrderItemCallback(\'{0}\', \'{1}\');orderItemWindow.hide();"><img src="../../images/icons/arrow_rotate_clockwise.png" title="' + message.get('message.list.select') + '" /></a>', record.data.id, record.data.colorNumber);
    }
    
    var orderItemSummary = new Ext.grid.GroupSummary();
    orderItemGrid = new Ext.grid.GridPanel({
        title: orderMessage.get('ui.order.listtitle'),
        store: orderItemStore,
        stripeRows: true,
        height: 360,
        columns: [{
            header: message.get('message.list.id'),
            width: 50,
            dataIndex: 'index',
            sortable: false
        }, {
            id: 'colorNumber',
            header: orderMessage.get('ui.order.color'),
            dataIndex: 'colorNumber',
			groupable: false,
            summaryRenderer: function(v, params, data){
                return '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + message.get('message.list.total');
            }
        }, {
            header: 'S',
            dataIndex: 'amountS',
            sortable: false,
            align: 'right',
			groupable: false,
            summaryType: 'sum'
        }, {
            header: 'M',
            dataIndex: 'amountM',
            sortable: false,
            align: 'right',
			groupable: false,
            summaryType: 'sum'
        }, {
            header: 'L',
            dataIndex: 'amountL',
            sortable: false,
            align: 'right',
			groupable: false,
            summaryType: 'sum'
        }, {
            header: 'XL',
            dataIndex: 'amountXl',
            sortable: false,
            align: 'right',
			groupable: false,
            summaryType: 'sum'
        }, {
            header: 'XXL',
            dataIndex: 'amountXxl',
            sortable: false,
            align: 'right',
			groupable: false,
            summaryType: 'sum'
        }, {
            header: 'XXXL',
            align: 'right',
            dataIndex: 'amountXxxl',
            sortable: false,
			groupable: false,
            summaryType: 'sum'
        }, {
            header: message.get('message.list.total'),
            id: 'total',
            dataIndex: 'total',
            align: 'right',
            sortable: false,
			groupable: false,
            summaryType: 'sum'
        }, {
            header: message.get('message.list.select'),
            width: 50,
            dataIndex: 'id',
            sortable: false,
			groupable: false,
            renderer: renderSelectItem
        }],
        view: new Ext.grid.GroupingView({
            forceFit: true,
            hideGroupedColumn: true,
			enableNoGroups:false,
            groupTextTpl: '{[values.rs.length]}&nbsp;&nbsp;' + message.get('message.list.order')
        }),
        loadMask: true,
        plugins: [orderItemSummary],
        renderTo: 'orderItemDiv'
    });
    
    orderItemStore.load();
    
    var startPage = getPrarmeterValue(window.location, 'startPage');
    var start;
    if (startPage == null || startPage == '') {
        start = 0;
    }
    else {
        start = (startPage - 1) * 20;
    }
    orderItemStore.load({
        params: {
            start: start,
            limit: 20
        }
    });
}

